<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./art-template(1).js"></script>
</head>

<body>
    <div class="box">

    </div>
    <!-- 
    使用script 定义一个模板
    在模板中可以接收html语法和js语法
    type="text/html"
    推荐 在一个模板中只有一个最外层标签

    在模板中使用{{}}包裹js的代码
 -->
    <script id="con" type="text/html">
<div>
    <p>编写标签</p>
    <p title = {{name}}>{{name}}</p>
    <p title="xxxx">{{age}}</p>
    {{if tab == "ask"}}
    <span>分享</span>
    {{else if tab == "quest"}}
    <span>问答</span>
    {{else}}
    <span>随便</span>
    {{/if}}
    <ul>
        {{each data as item}}
        <li>
            <h3>{{item.name}}</h3>
        </li>
    {{/each}}
    </ul>
    <ul>
        {{each arr as item1}}
        <li>
            {{item1}}
        </li>
        {{/each}}
    </ul>
</div>
 </script>

    <script>
        var res = {
            name: "lili",
            age: 18,
            tab: "ask",
            data: [{
                name: "aaa"
            }, {
                name: "bbb"
            }, {
                name: "ccc"
            }],
            arr: ["a", "b", "c"]
        }


        //template() 模板与数据结合 返回一个解析后的模板字符串
        // 参数1是模板的id
        // 参数2是一个对象 在模板中可以直接只用对象中直系属性
        var str = template("con", res);
        console.log(str); // 得到解析后的字符串
        document.querySelector(".box").innerHTML = str;
    </script>
</body>

</html>